<template>
    <div class="header">
        <div class="dev-width" style="overflow:visible">
            <a class="index-logo" href="/">
                <img :src='getImage'>
            </a>
            <ul class="top-menu">
                <li>
                    <a href="/helpCenter">
                        <label>帮助中心</label>
                    </a>
                </li>
                <template v-if="user">
                    <li>
                        <a>
                            <div class="user-img">
                                <img v-if="headPic==''" src='~/assets/images/head.png' />
                                <img v-else :src="headPic" :onerror="defaultImg" />
                                <span v-if='identities.length>0' :class='["identity",myIdentity.key!="01"?"orange":""]' :title='tip'>
                                    {{myIdentity.desc}}
                                </span>
                            </div>

                            <label class="user-name">{{user.userName||user.phone}}

                            </label>

                            <i class="iconfont icon-top_arrow"></i>

                        </a>
                        <ul class="drop-down">
                            <li>
                                <a :href="businessBrowserUrl+'/'">个人中心</a>
                            </li>
                            <li>
                                <a @click="signout">退出登录</a>
                            </li>
                        </ul>
                    </li>
                </template>
                <template v-else>
                    <li class="login-area">
                        <nuxt-link :to="{path:'/login'}">
                            <label>登录</label>
                        </nuxt-link>
                        <span class="seporator">/</span>
                        <nuxt-link :to="{path:'/register'}">
                            <label>注册</label>
                        </nuxt-link>
                    </li>
                </template>
                <li v-if="user" @click="toMessage">
                    <a>
                        <Badge :dot="hasMsg">
                            <i class="iconfont icon-quanbuxiaoxizhengchang msg-ico"></i>
                        </Badge>
                    </a>
                </li>
                <li>
                    <a @click="goToBusinessCenter(4)">
                        <label>技术经理人中心</label>
                    </a>
                </li>
                <li>
                    <a @click="goToBusinessCenter(3)">
                        <label>经纪机构中心</label>
                    </a>
                </li>
                <li>
                    <a @click="goToBusinessCenter(2)">
                        <label>卖家中心</label>
                    </a>
                </li>
                <li>
                    <a @click="goToBusinessCenter(1)">
                        <label>买家中心</label>
                    </a>
                </li>
            </ul>
        </div>
        <Modal class="confirm-dialog" v-model="realNameVisible" width="360">
            <p slot="header" style="color:#f60;text-align:center">
            </p>
            <div style="text-align:center">
                <p> 抱歉，您没有实名认证!</p>
            </div>
            <div slot="footer">
                <Button class="long" @click="operateClick(1)">立即实名认证</Button>
            </div>
        </Modal>
        <Modal class="confirm-dialog" v-model="identityVisible.show" width="360">
            <p slot="header" style="color:#f60;text-align:center">
            </p>
            <div style="text-align:center">
                <p>{{identityVisible.content}}</p>
            </div>
            <div slot="footer">
                <Button class="long" @click="operateClick(2)">立即申请</Button>
            </div>
        </Modal>
        <Modal class="confirm-dialog" v-model="noidentity.show" width="360">
            <p slot="header" style="color:#f60;text-align:center">
            </p>
            <div style="text-align:center">
                <p>{{noidentity.content}}</p>
            </div>
            <div slot="footer">
                <Button class="long" @click="noidentity.show=false">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import config from "~/config"
import { mapState } from 'vuex'
import portal from '~/net/portal'
import logo_white from '../assets/images/logo/logo_white.png'
import { absUrl } from '~/utils/tool'
import { Identities } from '~/constant/Identities'
export default {
    data() {
        return {
            realNameVisible: false,
            identityVisible: {
                show: false,
                content: ''
            },
            noidentity: {
                show: false,
                content: ''
            },
            hasMsg: false,
            timer: null,
            isFixed: false,
            scroll: '',
            businessBrowserUrl: config.businessBrowserUrl,
            headerclass: '',
            absUrl: absUrl,
            defaultImg: 'this.src="' + require('../assets/images/head.png') + '"'
        }
    },
    computed: {
        ...mapState(['user', 'identities']),
        getImage() {
            return logo_white;
        },
        headPic() {
            return this.absUrl(this.user.imgUrl)
        },
        tip() {
            var list = [];
            this.identities.map(_ => {
                return _.type
            }).forEach(item => {
                list.push(Identities.find(_ => _.key == item).value)
            });
            return list.join(',')
        },
        myIdentity() {
            if (this.identities.length > 0) {
                return Identities.find(_ => _.key == this.identities[0].type);
            }
            return [];
        }
    },
    mounted() {
        if (this.user) {
            this.timer = setInterval(() => {
                portal.getMessageCount().then(res => {
                    let { code, data, message } = res;
                    if (code == '0000') {
                        this.hasMsg = data > 0;
                    }
                })
            }, 5000);
        }
    },
    methods: {
        signout() {
            this.$store.dispatch('LogOut').then(res => {
                clearInterval(this.timer);
            })
        },
        toMessage() {
            window.location.href = `${this.businessBrowserUrl}/message`;
        },
        goToBusinessCenter(index) {
            if (this.user == null) {
                this.$router.push('/login')
            } else {
                if (this.user.userStatus == 2 || this.user.userStatus == 5) {
                    if (this.user.userType == 1) {
                        if (index === 1) {
                            window.location.href = `${this.businessBrowserUrl}/purchase?index=1`;
                        } else if (index === 2) {
                            window.location.href = `${this.businessBrowserUrl}/business?index=2`;
                        } else if (index === 3) {
                            this.noidentity.content = '抱歉，您不是机构用户，无法访问经纪机构中心';
                            this.noidentity.show = true;
                        } else if (index === 4) {
                            if (this.identities.length > 0) {
                                window.location.href = `${this.businessBrowserUrl}/tecManagerDetails?index=4`;
                            } else {
                                this.identityVisible.content = '您尚未拥有技术经理人身份';
                                this.identityVisible.show = true;
                            }
                        }
                    } else if (this.user.userType == 2) {
                        if (index === 1) {
                            window.location.href = `${this.businessBrowserUrl}/purchase?index=1`;
                        } else if (index === 2) {
                            window.location.href = `${this.businessBrowserUrl}/business?index=2`;
                        } else if (index === 3) {
                            if (this.identities.length > 0) {
                                let economicInstitutions = this.identities.some(item => {
                                    return item.type == '02';
                                });
                                if (economicInstitutions) {
                                    window.location.href = `${this.businessBrowserUrl}/technicalManager?index=3`;
                                } else {
                                    this.identityVisible.content = '您尚未拥有经纪机构身份';
                                    this.identityVisible.show = true;
                                }
                            } else {
                                this.identityVisible.content = '您尚未拥有经纪机构身份';
                                this.identityVisible.show = true;
                            }
                        } else if (index === 4) {
                            this.noidentity.content = '抱歉，您不是个人用户，无法访问技术经理人中心';
                            this.noidentity.show = true;
                        }
                    }
                } else {
                    this.realNameVisible = true;
                }
            }
        },
        operateClick(value) {
            this.realNameVisible = false;
            this.identityVisible.show = false
            if (value === 1) {
                window.location.href = `${this.businessBrowserUrl}/realname`;
            } else if (value === 2) {
                window.location.href = `${this.businessBrowserUrl}/identity`;
            }
        },
    },
    destroyed() {
        clearInterval(this.timer);
    }
}
</script>
<style lang="less">
.header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 222;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(64, 116, 225, 0.8);
}

.index-logo {
  display: block;
  float: left;
  width: 181px;
  height: 35.2px;
  margin: 12px 0 12px;
  img {
    width: 100%;
    height: 100%;
  }
}

.top-menu {
  float: right;
  li {
    float: right;
    line-height: 60px;
    position: relative;
    &:nth-child(5)::after {
      content: "|";
      color: white;
    }
    &:nth-child(7)::after {
      content: "|";
      color: white;
    }
    &:nth-child(6)::after {
      content: "|";
      color: white;
    }
    a {
      height: 100%;
      padding: 0 10px;
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      transition: all 0.25s ease;
      color: #fff;
    }
    label {
      display: inline-block;
      padding: 0 12px;
    }
  }
}

.user-img {
  position: relative;
  display: inline;
  img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
}

.identity {
  position: absolute;
  line-height: 14px;
  bottom: -8px;
  text-align: center;
  color: white;
  width: 14px;
  height: 14px;
  background: #4285f4;
  border-radius: 2px;
  font-size: 12px;
  margin-left: -8px;
  &.orange {
    background: #fb9109;
  }
}

.header + div {
  margin-top: 60px;
}

.header .login-area a {
  display: inline-block;
}

.drop-down {
  display: none;
  width: 124px;
  background: #fff;
  position: absolute;
  z-index: 900;
  top: 60px;
  right: 0px;
  text-align: center;
}

.drop-down li {
  height: 30px;
  line-height: 30px;
  text-align: center;
  float: none;
  margin: 0;
}

.drop-down li a {
  padding: 0 15px;
  color: #666;
  font-size: 12px;
  width: 100%;
}

.login-area .seporator {
  color: white;
}

.top-menu li a:hover {
  cursor: pointer;
  box-shadow: 0 1px #fff, 0 2px #fff, 0 3px #fff;
  background-color: hsla(0, 0%, 100%, 0.25);
}

.top-menu li:first-child a:hover {
  box-shadow: none;
}

.top-menu li:hover .drop-down {
  display: block;
}

.drop-down li a:hover {
  color: white;
  background: #3f7fe0;
}

.msg-ico {
  position: relative;
  right: 2px;
}
</style>
